<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE HTML>

<%
    String path = request.getContextPath();
    String basepath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + path;
    //http://localhost:8080/logistics/
%>

<html>
<head>

    <base href="<%=basepath%>">

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <%--bootstrap样式--%>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="lib/bootstrap-table/bootstrap-table.min.css"/>

    <title>客户管理</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 物流管理 <span
        class="c-gray en">&gt;</span> 订单管理
</nav>
<div class="page-container">

    <span id="toolbar" class="l">
        <a href="javascript:;" onclick="order_batch_del()" class="btn btn-danger radius"><i
                class="Hui-iconfont">&#xe6e2;</i>批量删除</a>

        <a href="javascript:;"  id="Test01" class="btn btn-primary radius">
            <i class="Hui-iconfont">&#xe600;</i> 添加订单</a>
    </span>
    <table id="dataTable"></table>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">

    /*
      * 文档加载完毕以后执行代码
      * */
    $(function () {
        $("#dataTable").bootstrapTable({
            url: 'order/list.do',
            responseHandler: function (res) {
                /*
                *
                res: 后台分页对象PageInfo返回对应的json对象
				res.list : 结果集
				res.total : 总记录数

                * */
                var data = {rows: res.list, total: res.total};
                return data;
            },
            detailView: true,    //显示详情
            pagination: true,   //显示分页条
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded', //条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            search: true, //是否显示搜索框
            pageNumber: 1,  //默认的页面,第一页
            pageSize: 10,   //默认每页条数
            pageList: [10, 25, 50, 100],      //每页显示的条数

            sidePagination: "server", //是否是服务器分页，每次请求都是对应的10条数据，下一页发送ajax请求
            paginationHAlign: 'right',  //底部分页条
            showRefresh: true,          //是否显示刷新按钮
            columns: [
                {
                    checkbox: true //显示前台的复选框(多选)
                },
                {
                    field: 'orderId',
                    title: '订单编号'
                },
                {
                    field: 'shippingAddress',
                    title: '收货地址'
                },
                {
                    field: 'shippingName',
                    title: '收件人'
                },
                {
                    field: 'shippingPhone',
                    title: '收件人电话'
                },
                {
                    field: 'takeName',
                    title: '取件联系人'
                },
                {
                    field: 'takeAddress',
                    title: '取件地址'
                },
                {
                    field: 'takePhone',
                    title: '取件人电话'
                },
                {
                    field: 'userId',
                    title: '业务员'
                },
                {
                    field: 'customerId',
                    title: '客户'
                },
                {
                    field: 'orderId',   //操作列的设置(删除,修改)
                    title: '操作',
                    align: 'center',
                    formatter: operationFormatter
                },
                {
                    field: 'orderId',
                    title: '察看',
                    align: 'center',
                    formatter: operationFormatter1
                }],
            /*设置ajax请求后台的参数
           * params:bootstraptable传递给后台的默认参数名称
           * 函数可以直接返回一个参数对象，设置给传递给后台参数名称和值
           * */
            queryParams: function (params) {

                var paramsData = {
                    keyword: params.search,                   //搜索栏搜索
                    pageSize: params.limit,                   //  每页显示多少数据
                    pageNum: params.offset / params.limit + 1
                };   //  10/0 +1 =1, 10/10 +1 =2, 20/10 +1 =3


                return paramsData;
            },
            /* 当点击父表的行的+号展开时候触发
			index ：行号
			row ：展开行对应的json数据
			$detail：创建子表的一个对象，子表使用此对象创建
		*/
            onExpandRow: function (index, row, $detail) {
                //获取当前展开行对应的 订单id
                var orderId = row.orderId;

                //创建一个表格，用户点击+号时候马上创建一个表格（子表），用于添加详细数据
                var cur_table = $detail.html('<table></table>').find('table');

                //把子表变成bootstra-table
                $(cur_table).bootstrapTable({
                    url: 'order/detail.do',
                    method: 'get',
                    contentType: 'application/json;charset=UTF-8',//这里我就加了个utf-8
                    dataType: 'json',
                    queryParams: {orderId: orderId},
                    clickToSelect: true,
                    pageSize:10,         //默认每页数据
                    pagination:true,    //显示分页数据
                    columns: [{
                        field: 'orderDetailId',
                        title: '订单明细编号'
                    }, {
                        field: 'goodsName',
                        title: '货品名称'
                    }, {
                        field: 'goodsNumber',
                        title: '货品数量'
                    }, {
                        field: 'goodsTotal',
                        title: '总价'
                    }, {
                        field: 'goodsRemark',
                        title: '货品描述'
                    }]


                });
            }

        });


        /* 操作权限 添加、删除*/
        function operationFormatter(value, row, index, field) {
            var html = "<span onclick='order_del(" + value + ")' style='color:blue;cursor: pointer' class='glyphicon glyphicon-trash'></span>&nbsp;&nbsp;&nbsp;";
            html += "<span onclick='order_update(" + value + ")' style='color:blue;cursor: pointer' class='glyphicon glyphicon-pencil'></span>";

            return html;
        }

        /*察看*/
        function operationFormatter1(value, row, index, field) {
            var html = "<span onclick='order_detail(" + value + ")' style='color:blue;cursor: pointer' class='glyphicon glyphicon-search'></span>&nbsp;&nbsp;&nbsp;";

            return html;
        }

        /*
      列格式化函数
      value: 值   性别
      row:   rows  整行的数据   row:[object Object]
      index: index    下标      （从0开始）
      field: fieId  字段名称

      此函数返回一个字符串，html自动解析渲染效果
      * */


        /*订单-详细信息*/
        function order_detail() {
            layer.open({
                type: 2,
                maxmin: true,
                area: [$(window).width() + 'px', $(window).height() + 'px'],
                title: '察看订单',
                content: 'order/detail.do'
            });
        }


        /*删除角色*/
        function order_del(customerId) {
            layer.confirm('您确定要删除此条吗?', function () {

                //发送ajax请求数据删除数据
                //jQuery.get(url, [data], [callback], [type])
                $.get("order/delete.do", {customerId: customerId}, function (data) {
                    //icon:对应的提示图标  time:删除后1.5秒后关闭弹窗
                    layer.msg(data.msg, {icon: data.code, time: 1500}, function () {

                        //操作成功，刷新Bootstarp-table
                        if (data.code == 1) {
                            //刷新表格
                            refreshTable();
                        }

                    });
                })

            });
        }

        /*刷新表格*/
        function refreshTable() {

            $("#dataTable").bootstrapTable('refresh');
        }



        /*添加订单*/
        $("#Test01").click(function(){
            layer.open({
                type: 2,
                maxmin: true,
                area: [$(window).width() + 'px', $(window).height() + 'px'],
                title: '添加订单',
                content: 'order/edit.do'
            });
        })


        /*修改订单*/
        function order_update(customerId) {
            layer.open({
                type: 2,
                maxmin: true,
                area: ['800px', '500px'],
                title: '修改订单',
                content: 'order/edit.do?customerId=' + customerId
            });
        }

        /*批量删除*/
        function customer_batch_del() {
            //获取bootstraptable选中的列  $table.bootstrapTable('getSelections').
            var rows = $("#dataTable").bootstrapTable('getSelections');

            if (rows.length == 0) {
                layer.msg("最少选择一条需要删除的数据", {icon: 0});
                return false;
            }

            //获取需要删除id的所有值
            var userIds = [];
            for (var i = 0; i < rows.length; i++) {
                var user = rows[i];
                //将用户id添加到数组
                userIds.push(user.customerId);

            }

            var userIdsStr = userIds.toString();

            layer.confirm('您确定要删除这些数据吗?', function () {
                //发送ajax请求数据删除数据
                //jQuery.get(url, [data], [callback], [type])
                $.post("role/deleteAll.do", {str: userIdsStr}, function (data) {
                    layer.msg(data.msg, {icon: data.code, time: 1500}, function () {

                        //操作成功
                        if (data.code == 1) {
                            //刷新表格
                            refreshTable();
                        }
                    })
                })

            });
        }
    })

</script>
</body>
</html>